<script setup>
import Demo10 from "./Demo10.vue"
import Demo11 from "../study/learing/Demo10.vue"
import Demo22 from "./Demo22.vue"
import Demo25 from "./Demo25.vue"
import Demo28 from "./Demo28.vue"
import {ref} from 'vue'
import { computed } from "vue"
import { shallowRef } from "vue"
import { onUnmounted,onMounted} from "vue"
import { KeepAlive } from "vue"
const isb=shallowRef(Demo10)
onMounted(()=>{
  console.log("待办事项页面挂载")  
})
onUnmounted(()=>{console.log("待办事项页面销毁")})
</script>
<template>
<h1>动态组件-Demo24{{comp}}</h1>
<hr/>
<!-- is绑定 只能绑定全局组件，不能绑定局部组件，局部组件被认为是字符串 -->
<component is="Demo22"></component>
<ul>
     <li @click="isb=Demo25">插槽</li>
    <li @click="isb=Demo10">代办事项</li>
    <li @click="isb=Demo11"> 小黑记事本</li>
    <li @click="isb=Demo22">学习计划表</li>
</ul>
<div class="box">
    <!-- 动态组件绑定：is 静态绑定（组件变量） 动态绑定（组件变量） -->
     <!-- mxax：缓存的最大数量,假设max=2 --最后激活的2个组件
        include:包含
        exclude:排除
         
     -->
    <KeepAlive>
    <component :is="isb"></component>
    </KeepAlive>    

</div>
</template>
<style scoped>
ul{
    width:500px ;
    list-style: none;
    display: flex;
    height: 40px;
    background-color: lightgray;
    justify-content: space-around;
    align-items: center;
}
li{
    cursor: pointer;
}
li:hover{
    color: orangered;
}
.box{
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>